<script>
import HeaderNav from '@/components/HeaderNav.vue'
import TaskContainer from '@/components/TaskContainer.vue'
import EnterpriseTaskItem from '@/components/EnterpriseTaskItem.vue'
import Condition from '@/components/Condition.vue'

export default {
  components: {
    HeaderNav,
    EnterpriseTaskItem,
    TaskContainer,
    Condition,
  },
  data() {
    return {
      pagination: {
        page: 1,
        rows: 20,
      },
      condition: {}, // 查询条件
      conditionList: [
        {
          name: "任务阶段",
          value: 'stage',  // 查询条件对应的键
          list: [
            {
              id: 1 ,
              name: "第一阶段",
              child: {
                name: "任务模块",
                value: 'module',
                list: [
                  {id: 1, name: "基础"},
                  {id: 2, name: "流程控制"},
                  {id: 3, name: "列表/数组"},
                  {id: 4, name: "字典"},
                  {id: 5, name: "集合"},
                ]
              }
            },
            {
              id: 2 ,
              name: "第二阶段",
              child: {
                name: "任务模块",
                value: 'module',
                list: [
                  {id: 6, name: "HTML"},
                  {id: 7, name: "CSS"},
                  {id: 8, name: "Javascript"},
                  {id: 9, name: "jQuery"},
                  {id: 10, name: "Vue"},
                ]
              }
            },
          ],
           multi: true, // 支持多选
        },
        {
          name: "难易程度",
          value: 'leave',  // 查询条件对应的键
          list: [
            {id: "简单题", name: "简单题"},
            {id: "中等题", name: "中等题"},
            {id: "难题", name: "难题"},
            {id: "选做题", name: "选做题"},
          ],
          multi: true, // 支持多选
        }
      ]
    }
  },
  methods: {
    addTask(event) {
      this.$layer.open({
        type: 2,
        title: '添加任务',
        shadeClose: true,
        shade: 0.5,
        area: ['860px', '560px'],
        btn: ['保存', '关闭'],
        content: '/task/add',
        yes: (index, layero) => {
          layer.close(index);
        }
      })
    },
    removeTask(taskId) {
      this.$layer.confirm('确定要删除该任务吗？', {icon: 3, title: '提示'}, (index) => {
        this.$layer.msg('删除成功');
        this.$layer.close(index);
      })
    }
  }
}
</script>

<template>
  <main>
    <!-- 系统导航 -->
    <HeaderNav active-index="0"></HeaderNav>

    <!-- 搜索条件 -->
    <Condition :conditionList="conditionList" v-model="condition">
      <template #search="{ condition }">
        <el-input
            v-model="condition.search" size="large"
            placeholder="请输入搜索的任务关键词">
          <template #prefix>
            <el-icon class="el-input__icon">
              <search/>
            </el-icon>
          </template>
        </el-input>
      </template>

      <template #toolbar>
        <el-button type="primary" size="large" @click="addTask">添加任务
          <template #icon>
            <el-icon>
              <CirclePlus/>
            </el-icon>
          </template>
        </el-button>
      </template>
    </Condition>

    <!-- 任务列表 -->
    <TaskContainer>
      <!-- 显示单个任务列表 -->
      <EnterpriseTaskItem v-for="n in 20"
                          :id="1"
                          :leave="1"
                          :stage="1"
                          title="装饰器】编写一个装饰器 logs、记录函数的执行信息、包括 函数名、参数、返回值结果"
                          module-name="java基础"
                          @delete-click="removeTask"/>

      <!-- 添加分页插件 -->
      <div style="margin: 20px 0;">
        <el-pagination background layout="prev, pager, next"
                       hide-on-single-page
                       :page-size="pagination.rows"
                       :pager-count="11"
                       v-model:current-page="pagination.page"
                       :total="1000"/>
      </div>
    </TaskContainer>

  </main>
</template>

